<template>
    <uni-card>
        <!--头部内容-->
        <view class="container">
            <view class="flex-row">
                <uni-icons :type="icon" size="20" />
                <text class="name">{{ name }}</text>
            </view>
            <view class="flex-row-right">
                <uni-icons type="right" size="20" @tap="toChat(name)"/>
            </view>
        </view>
        <!--内容-->
        <view>
            <listChat :list="chatList" @addOrJoin="addOrJoin"></listChat>
        </view>
    </uni-card>
</template>

<script setup>
import listChat from '../../../components/list_chat.vue';
defineProps({
	icon: {
		type: String,
		default: ''
	},
	name: {
        type: String,
        default: ''
    },
    chatList: {
		type: Array,
		default: () => []
	}
})
//向父组件传值
const emit = defineEmits()
const toChat = (name) => {
    emit('toChat', name)
}
const addOrJoin = (name) => {
    emit('addOrJoin', name)
}
</script>

<style lang="scss" scoped>
.container{
    display: flex;
   align-items: center;
    .flex-row{
        .name{
            margin-left: 10rpx;
        }
    }
    .flex-row-right{
        margin-left: auto;
    }
}
</style>